import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { detail, getAddCart } from '../../api'
import { Swiper, Toast, NavBar } from 'antd-mobile'
import { LeftOutline, MoreOutline  } from 'antd-mobile-icons'
import './detail.scss'
import { CartO } from '@react-vant/icons'
import { ActionBar } from 'react-vant'
import { useSelector } from 'react-redux'

export default function Detail() {
  let userid = useSelector(state=>state.user.userId)
  let {proid} = useParams()
  let [num,setNum] = useState(1)
  let [DetailList,setDetailList] = useState([])
  let [str,setStr] = useState('')   //  存储 banners 字符串
  let bndList = str.split(',')  //  将banners字符串拆分为数组
  let navigate = useNavigate()
  useEffect(()=>{
    detail(proid).then((res)=>{
      // console.log(res.data.data);
      
      setDetailList(res.data.data)
      setStr(res.data.data.banners[0])
    })
  },[])
  // console.log(bndList);

  // 头部导航栏 -- 返回按钮
  const back = () =>{
    navigate(-1)
  }
    // 轮播图
  const items = bndList.map((item, index) => (
    <Swiper.Item key={index}>
      <div
        className='swiper'
        onClick={() => {
          Toast.show(`你点击了卡片 ${index + 1}`)
        }}
      >
        <img src={item} />
      </div>
    </Swiper.Item>
  ))
  // 加入购物车
  const addCart = () => {
    getAddCart({userid,proid,num:'1'}).then((res)=>{
      console.log(res);
    })
    console.log(111);
  }
  // 点击购物车
  const clickCart = () => {
    navigate('/car')
  }
  return (
    <div>
      <div title='自定义返回按钮图标' padding='0'>
        <NavBar  back='返回'
        backArrow={<LeftOutline />} 
        style={{color:"#1989fa",height:'46px',borderBottom:'1px solid #ccc'}}
        right={<MoreOutline style={{fontSize:'40'}} />} onBack={back}>
          <span style={{color:'#000'}}>详情</span>
        </NavBar>
      </div>

      <div title='循环'>
        <Swiper
          
          loop
          autoplay
          onIndexChange={i => {
            // console.log(i, 'onIndexChange1')
          }}
        >
          {items}
        </Swiper>
      </div>
      <h2 className='price'>&yen;{DetailList.originprice}</h2>
      <h2 className='proname'> <span>自营</span> {DetailList.proname}</h2>
      <div className='demo-action-bar'>
      <ActionBar safeAreaInsetBottom>
        <ActionBar.Icon icon={<CartO />} badge={false} text='购物车' onClick={clickCart} />
        <ActionBar.Button type='warning' text='加入购物车' onClick={addCart} />
        <ActionBar.Button type='danger' text='立即购买' />
      </ActionBar>
    </div>   
    </div>
  )
}
